// components/tagTab/tagTab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 样式: 可滚动, 不可滚动(平分)
    isCanScroll: {
      type: Boolean,
      value: true,
    },
    // 自定义下划线
    customLine: {
      type: Boolean,
      value: false,
    },
    // 背景颜色 (#999 或 red)
    backgroundColor: {
      type: String,
      value: "white",
    },

    selectFontColor: {
      type: String,
      value: ""
    },
    lineColor: {
      type: String,
      value: ""
    },
    // 自定义tip样式
    customCellStyle: {
      type: String,
      value: ""
    },
    // tags
    tags: {
      type: Array,
      value: [],
      observer: function () {
        setTimeout(() => {
          this.createSelectorQuery(this).selectAll("#scrollView").boundingClientRect().exec(res => {
            let scrollV = res.length && res[0].length && res[0][0]
            this.scrollWidth = scrollV.width
          })
          this.createSelectorQuery(this).selectAll(".cell").boundingClientRect().exec(res => {
            console.log('返回节点结果', res)
            let nodes = res.length && res[0].length && res[0]
            if (!nodes) return

            let tagsCenter = nodes.map(i => i.left + i.width / 2)

            this.setData({
              marginLeft: nodes[0].left,
              tagsCenter: tagsCenter,
            })
            tagsCenter.length && this.selectedItem(this.data.selectedIndex)
            this.triggerEvent("finish")
          })
        }, 30)
      }
    },
    tagsObj: {
      type: Array,
      value: [],
      observer: function (value) {
        this.setData({
          tags: value.map(i => {
            return i["title"] || i["desc"] || i["name"]
          })
        })
      }
    },
    selectedIndex: {
      type: Number,
      value: 0,
      observer: function (value) {
        this.selectedItem(value)
      }
    },
    titleColor: {
      type: String,
      value: ""
    },
    fontSize: {
      type: String,
      value: "28rpx",
    },
    padding: {
      type: String,
      value: ""
    },
    color: {
      type: String,
      value: "#fff"
    },
    activeColor: {
      type: String,
      value: "var(--themeColor)"
    },
    // 特殊处理, 组件不触发选择,只传递事件
    disableSelect: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isInitFinish: false,
    tagsCenter: [],
    lineLeft: 0,
    marginLeft: 0,
  },
  lifetimes: {
    ready: function () {

    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 选择第几个
    selectedItem(index) {
      let {
        tagsCenter,
        marginLeft
      } = this.data
      let scrollX = tagsCenter[index] - this.scrollWidth / 2

      this.setData({
        selectedIndex: index,
        lineLeft: tagsCenter[index] - 19 - marginLeft,
        scrollX: scrollX > 0 ? scrollX : 0
      })
    },

    // 点击 项
    clicktag(e) {
      let index = e.currentTarget.dataset.index
      console.log('点击项', index)
      const {
        tags,
        tagsObj
      } = this.data
      this.triggerEvent("change", {
        index,
        target: (tagsObj && tagsObj.length) ? tagsObj[index]: tags[index]
      })

      if (!this.data.disableSelect) {
        this.selectedItem(index)
      }
    },
  }
})